<template>
	<view class="content" v-if="currentData">
		<view class="order-detail">
			<view class="top-part flex-center-col">
				<view class="title">{{ currentData.description }}</view>
				<view class="state" :style="{ color: getStateColor(currentData) }">{{ getStateText(currentData) }}
				</view>
				<!-- 生成二维码 -->
				<canvas v-if="!qrCodeUrl && currentData.status == orderState.NOUSE" canvas-id="myCanvas"
					style="width: 200px;height: 200px;margin-top: 20px;"></canvas>
				<image v-if="qrCodeUrl && currentData.status == orderState.NOUSE" :src="qrCodeUrl"
					style="width: 200px;height: 200px;margin-top: 20px;" />
				<view class="code" :class="currentData.status !== orderState.NOUSE && 'strike'">{{ currentData.out_trade_no }}</view>
				<button class="contact flex-center" v-if="currentData.status == orderState.REFUNDING | currentData.status == orderState.REFUNDED"
					open-type="contact" @contact="toContact">联系我们
				</button>
				<view class="tip">{{ tipText }}</view>
			</view>
			<view class="info">
				<view class="title">订单信息</view>
				<view>
					<view class="text">订单编号：{{ currentData.out_trade_no }}</view>
					<view class="text">支付时间：
						<text>{{ formateTime('day', currentData.created_time) }}</text> <text>{{ formateTime('time',
							currentData.created_time) }}</text>
					</view>
					<view class="text" v-if="useTime">可用时间：{{ useTime }}</view>
					<view class="text" v-if="currentData.status == orderState.NOUSE">工作日：下午3点-晚上10点 </view>
					<view class="text" v-if="currentData.status == orderState.NOUSE">周末：上午12点-晚上10点</view>
					<view class="text" v-if="currentData.status == orderState.DONE">核销时间：<text>{{ formateTime('day',
						currentData.verification_time) }}</text> <text>{{ formateTime('time',
								currentData.verification_time) }}</text></view>
					<view class="text" v-if="currentData.status == orderState.REFUNDED && currentData.refund_time">退款申请时间：
						<text>{{ formateTime('day',
							currentData.refund_time) }}</text> <text>{{ formateTime('time',
								currentData.refund_time) }}</text>
					</view>
				</view>
			</view>
			<view class="btn-group flex-center" v-if="currentData.status == orderState.NOUSE">
				<view @click="toShopDetail">商品详情</view>
				<view @click="() => { isShowPop = true; }">我要退款</view>
			</view>
		</view>
		<confirm :show="isShowPop" confirmBtn="确认" cancelBtn="取消" @confirm="refund"
			@cancel="() => { isShowPop = false }">
			<template v-slot:content>
				<view class="confrim-content flex-center-col">
					<view class="name">项目名称</view>
					<view class="title">{{ currentData.description }}</view>
					<view class="text">是否确认申请退款</view>
					<view class="text">一旦确认订单将无法复原</view>
				</view>
			</template>
		</confirm>
	</view>
</template>

<script>
import confirm from '../../components/confrim/confrim.vue'
import drawQrcode from '../../utils/qrcode';
import { formateTime } from '../../utils/formateTime.js';
import { orderState } from '../../utils/stateEnum';
import {
	mapState,
	mapActions
} from 'vuex';
export default {
	components: {
		confirm,
	},
	data() {
		return {
			currentData: null,
			tipText: '',
			isShowPop: false,
			qrCodeUrl: '',
			useTime: '2024年10月29日-2024年11月3日',
			orderState,
		}
	},
	computed: {
		...mapState({
			orderList: state => state.order.orderList // 确保这里引用正确
		})
	},
	onLoad(options) {
		this.getOrderList().then(() => {
			if (options?.orderId) {
				this.currentData = this.orderList.filter(item => item.id == +options.orderId)[0];
				console.log(this.currentData);
				this.getStateText(this.currentData);
				this.generateQRCode();
			}
		});
	},
	methods: {
		...mapActions(['getOrderList',]),
		formateTime,//注册导入方法
		generateQRCode() {
			let key = 'order,' + this.currentData.out_trade_no;
			let that = this;
			drawQrcode({
				width: 200,
				height: 200,
				canvasId: 'myCanvas',
				text: key,
				callback: (res) => {
					console.log('绘制成功', res);
					uni.canvasToTempFilePath({
						canvasId: 'myCanvas',
						success: (res) => {
							console.log('导出图片', res.tempFilePath);
							that.qrCodeUrl = res.tempFilePath;
						},
						fail: (err) => {
							console.error('导出图片失败:', err);
						}
					}, this);
				}
			})
		},
		getStateText(item) {
			switch (item?.status) {
				case orderState.NOPAY:
					return '待支付'
				case orderState.NOUSE:
					this.tipText = '支付成功，请向工作人员出示二维码进行核验';
					return '待使用'
				case orderState.DONE:
					this.tipText = '订单已被核验，如有问题请咨询现场工作人员';
					return '已完成'
				case orderState.REFUNDING:
					this.tipText = '商家正在处理中，预计需要3-5个工作日完成';
					return '退款中'
				case orderState.REFUNDED:
					this.tipText = '商家已处理完成，如有问题请拨打电话400-669-0072';
					return '已退款'
				case orderState.CLOSED:
					return '已关闭'
			}
		},
		getStateColor(item) {
			switch (item?.status) {
				case orderState.NOUSE:
					return '#019E01'
				case orderState.REFUNDING:
					return '#F5A623'
				default:
					return '#1F1F1F';
			}
		},
		refund() {
			console.log('确认退款');
			this.$http.orderRefund({ out_trade_no: this.currentData.out_trade_no }).then(() => {
				this.isShowPop = false;
				this.currentData.status = orderState.REFUNDED;
			}).catch((err) => {
				console.log('退款失败', err.data.errmsg);
				this.isShowPop = false;
				wx.showToast({
					title: '取消失败',
					icon: 'fail',
					duration: 2000
				})
			})
		},
		toShopDetail() {
			uni.navigateTo({
				url: '/packageA/shopDetail/shopDetail?shopId=' + this.currentData.goods_id
			});
		},
		toContact(e) {
			console.log('在线客服', e.detail.path)
			console.log(e.detail.query)
		}
	}
}
</script>

<style lang="scss" scoped>
.order-detail {
	width: 100%;
	max-height: 100%;
	overflow-y: auto;
	position: relative;
	z-index: 1;
}

.top-part {
	width: auto;
	padding: 0 18px 20px 18px;
	position: relative;

	.title {
		font-size: 24px;
		font-weight: 600;
		margin: 20px 0 30px 0;
	}

	.state {
		font-size: 16px;
	}

	.strike {
		color: $gray-color !important;
		text-decoration: line-through;
	}

	.code {
		font-size: 16px;
		margin: 20px 0;
		color: $primary-color;
	}

	.contact {
		width: 88px;
		height: 28px;
		width: auto;
		height: auto;
		border: none;
		outline: none;
		border: 1px solid $primary-color !important;
		font-size: 12px;
		margin-bottom: 20px;
		border-radius: 0 !important;
	}

	.tip {
		font-size: 12px;
		letter-spacing: 0.8px;
		color: $gray-color;
	}

	&::after {
		content: '';
		width: calc(100% - 42px);
		height: 1px;
		background-color: $gray-color;
		position: absolute;
		bottom: 0px;
		left: 50%;
		transform: translateX(-50%);
		opacity: 0.5;
	}
}

.info {
	padding: 20px 18px 20px 25px;
	position: relative;

	.title {
		font-size: 16px;
		font-weight: 600;
		letter-spacing: 0.8px;
	}

	.text {
		font-size: 12px;
		letter-spacing: 0.8px;
		margin-top: 8px;

		&:nth-child(1) {
			margin-top: 15px;
		}
	}
}

.btn-group {
	font-size: 14px;
	color: $gray-color;
	position: relative;
	margin-top: 20px;

	&::before {
		content: '';
		width: calc(100% - 42px);
		height: 1px;
		background-color: $gray-color;
		position: absolute;
		top: -20px;
		left: 50%;
		transform: translateX(-50%);
		opacity: 0.5;
	}

	>view {
		margin: 15px;
	}

	&::after {
		content: '';
		width: 0.5px;
		height: 12px;
		background-color: $gray-color;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}
}

.confrim-content {

	.name {
		font-size: 16px;
		margin-bottom: 28px;
	}

	.title {
		font-size: 24px;
		font-weight: 600;
		margin-bottom: 28px;
	}

	.text {
		font-size: 16px;
		letter-spacing: 1px;
		color: $gray-color;
	}
}
</style>
